import React from 'react';
import Container from 'components/Container';
import styles from './index.module.less';

const Nodes = [
  {
    id: 'app',
    icon: '',
    name: 'APP 动作',
  },
  {
    id: 'script',
    icon: '',
    name: '执行脚本',
  },
  {
    id: 'switch',
    icon: '',
    name: '条件分支',
  },
];

const handleDragStart = (e, id) => {
  e.dataTransfer.setData('type', id);
};

const Node = (item) => (
  <Container
    key={item.id}
    flex
    alignItems="center"
    padding="14px"
    draggable="true"
    className={styles.nodesItem}
    onDragStart={(e) => handleDragStart(e, item.id)}
  >
    <span>{item.icon}</span>
    <span>{item.name}</span>
  </Container>
);

const NodesList = () => {
  console.log();
  return (
    <Container className={styles.nodesList}>
      <Container className={styles.nodesTitle}>节点库</Container>
      <Container draggable="false" className={styles.nodesBody}>
        {Nodes.map((item) => Node(item))}
      </Container>
    </Container>
  );
};

export default NodesList;
